<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<%@ include file="/common/datatables.jsp" %>

<div class="row">
	<div class="col-xs-12">
		
		<div class="table-header" style="background-color:#5090c1">
			用户列表
			<div class="pull-right tableTools-container"></div>
		</div>
		<!-- div.table-responsive -->
		<!-- div.dataTables_borderWrap -->
		<div >
			<table id="userListTable" class="table table-striped table-bordered table-hover" style="table-layout:fixed">
				<thead>
					<tr>
						<!-- <th>编号</th> -->
						<th class="center">用户ID</th>
						<th class="center">人力资源编号</th>
						<th class="center">用户名</th>
						<th class="center">所属机构</th>
						<!-- <th class="center">是否在职</th>
						<th class="center">证件号码</th> -->
						<th class="center">拥有角色</th>
						<th class="center">用户状态</th>
					</tr>
				</thead>
				<tbody>
					<tr><td colspan="6" align="center">数据加载中...</td></tr>
				</tbody>
			</table>
		</div>		
	</div>
</div>

<div id="userInfoDetailIframe"></div>

<!-- page specific plugin scripts -->
<script type="text/javascript">


var userListTable;
//清空缓存
oCache.iCacheLower= -1;
//$(function(){
	var scripts = [null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	
	userListTable = $('#userListTable').dataTable({
		"bProcessing": true,
		"bServerSide": true,
		"bDestroy":true,
		"bSort": false,
		"bFilter": false,
		"destroy": true,//解决 Cannot reinitialise DataTable的问题
		"oLanguage":oLanguage,
		"bAutoWidth": false,
		"sPaginationType": "full_numbers",
		"fnServerParams": function ( aoData ) {
			aoData.push( { "name": "userId", "value": "${userInfo.userId}" } );
			aoData.push( { "name": "userName", "value": "${userInfo.userName}" } );
			/* aoData.push( { "name": "cardNo", "value": "${userInfo.cardNo}" } ); */
			aoData.push( { "name": "queryRole", "value":"${userInfo.queryRole}" } );
			aoData.push( { "name": "orgId", "value": "${userInfo.orgId}" } );
			aoData.push( { "name": "deptId", "value": "${userInfo.deptId}" } );
			aoData.push( { "name": "status", "value": "${userInfo.status}" } );
		},
		"sAjaxSource": "${ctx}/user/selectUserList",
		"fnServerData": fnDataTablesPipeline,
		"columnDefs": [
						{ "visible": false,  "targets": [ 0 ] }
		               ],
        "sServerMethod": "POST",
        "fnDrawCallback" : function(param) {			
        	$('#userListTable tbody td').each(function(index){
			    $this = $(this);
			    $this.attr("class","td-overflow");
			    $this.attr("style","width:150px;");
			    var titleVal = $this.text();
			    if (titleVal != '') {
			      $this.attr('title', titleVal);
			    }
			});
			
		}  
		
	});
	
	$('#userListTable').on('dblclick', 'tbody tr' , function(){
		var aData = userListTable.fnGetData(this); 
		if (aData == null) {
			return;
		} 
		showUserDetail(aData[0]);	
	});	
	
	
	//弹出详情页面
 	function showUserDetail(aData){
 		var params ={"userId":aData};
		$('#userInfoDiv').load("${ctx}/user/toQueryDetail.do",params,function(){
			$('#userInfoDiv').data("userBtnFlag","show").dialog("open");
			});
		
 	}
 	
	//TableTools settings
	TableTools.classes.container = "btn-group btn-overlap";
	TableTools.classes.print = {
			"body": "DTTT_Print",
			"info": "tableTools-alert gritter-item-wrapper gritter-info gritter-center white",
			"message": "tableTools-print-navbar"
		}
		
	//initiate TableTools extension
	var tableTools_obj = new $.fn.dataTable.TableTools(userListTable, {
			"sSwfPath": "${ctx}/assets/js/dataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf", 
			"sRowSelect": "single",	
			"sSelectedClass": "success",
	        "aButtons": [ ]
	    });	    	    
	$(tableTools_obj.fnContainer()).appendTo($('.tableTools-container'));	
	setTimeout(function() {
			$(tableTools_obj.fnContainer()).find('a.DTTT_button').each(function() {
				var div = $(this).find('div');
				if(div.length > 0) div.tooltip({container: 'body'});
				else $(this).tooltip({container: 'body'});
			});
		}, 200);	

	//ColVis extension
	var colvis = new $.fn.dataTable.ColVis(userListTable, {
		"buttonText": "<i class='fa fa-search'></i>",
		"aiExclude": [0, 3],
		"bShowAll": true,	
		"sAlign": "right",
		"sShowAll":"显示所有",
		"fnLabel": function(i, title, th) {
			return $(th).text();
		}			
	}); 
		
	//style it
	$(colvis.button()).addClass('btn-group').find('button').addClass('btn btn-white btn-info btn-bold');
	//and append it to our table tools btn-group, also add tooltip

	$(colvis.button()).prependTo('.tableTools-container .btn-group').attr('title', '显示/隐藏 列').tooltip({container: 'body'});
		
	//and make the list, buttons and checkboxed Ace-like
	$(colvis.dom.collection).addClass('dropdown-menu dropdown-light dropdown-caret dropdown-caret-right')
		.find('li').wrapInner('<a href="javascript:void(0)" />') //'A' tag is required for better styling
		.find('input[type=checkbox]').addClass('ace').next().addClass('lbl padding-8');
	
	/****************************s****/
	//add tooltip for small view action buttons in dropdown menu
	$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
});

//tooltip placement on right or left
function tooltip_placement(context, source) {
	var $source = $(source);
	var $parent = $source.closest('table');
	var off1 = $parent.offset();
	var w1 = $parent.width();
	var off2 = $source.offset();
		
	if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1/2)) {
		return 'right';
	}
	return 'left';
}
</script>
